import { useEffect, useState, useRef } from 'react';
import {
  Table,
  Button,
  Space,
  Modal,
  Form,
  Input,
  InputNumber,
  Cascader,
  message,
} from 'antd';
import { getMenu, addMenu } from '../../../../api/system/router';
import {
  changeTreeListForColumns,
  changeTreeListForSelect,
} from '../../../../hook/dataHook';

export default function FunctionalModule() {
  const [data, setData] = useState([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [options, setOptions] = useState([]);
  const initialized = useRef(false);
  const [form] = Form.useForm();
  const SYSTEM_COLUMNS = [
    {
      title: '名称',
      dataIndex: 'title',
      key: 'title',
      width: '15%',
    },
    {
      title: '图标',
      dataIndex: 'icon',
      width: '12%',
      key: 'icon',
    },
    {
      title: '类型',
      dataIndex: 'type',
      width: '12%',
      key: 'type',
    },
    {
      title: '排序号',
      dataIndex: 'sort',
      width: '12%',
      key: 'sort',
    },
    {
      title: '访问路径',
      dataIndex: 'name',
      width: '12%',
      key: 'name',
    },
    {
      title: '操作',
      dataIndex: 'operate',
      key: 'operate',
      width: '12%',
      render: (text, record) => (
        <Space>
          <Button onClick={() => updateCell(record)} type="primary">
            修改
          </Button>
          <Button onClick={() => deleteCell(record)} danger>
            删除
          </Button>
        </Space>
      ),
    },
  ];
  
  const updateCell = (record) => {
    console.log(record);
    form.setFieldValue('title', record.title)
    form.setFieldValue('parentId', record.parentId)
    form.setFieldValue('name', record.name)
    form.setFieldValue('icon', record.icons)
    form.setFieldValue('sort', record.sort)
    setIsModalOpen(true);
  };
  const deleteCell = (record) => {
    console.log(record);
  };


  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const addCell = () => {
    console.log(1111);
    setIsModalOpen(true);
  };
  useEffect(() => {
    if (!initialized.current) {
      initialized.current = true;
      getMenu().then((res) => {
        if (res.data.code === 200) {
          let treeList = res.data.data;
          setData(changeTreeListForColumns([...treeList]));
          const fristObj = [
            {
              value: 0,
              label: '一级目录',
              children: changeTreeListForSelect([...treeList]),
            },
          ];
          setOptions(fristObj);
        }
      });
    }
  }, []);

  const onFinish = async (values) => {
    // 新增数据
    let data = {
      icon: values.icon || '',
      name: values.name,
      parentId: values.parentId.at(-1),
      sort: values.sort || 0,
      title: values.title,
    };
    const res = await addMenu(data);
    if (res.data.code === 200) {
      message.success('添加成功');
      form.resetFields();
    }
    setIsModalOpen(false);
  };

  return (
    <>
      <Space>
        <Button onClick={() => addCell()} type="primary">
          新增
        </Button>
      </Space>
      <Table columns={SYSTEM_COLUMNS} dataSource={data} />

      {/* 新增 */}
      <Modal
        title="新增"
        footer={
          [] // 设置footer为空，去掉 取消 确定默认按钮
        }
        open={isModalOpen}
        onCancel={handleCancel}
      >
        <Form
          form={form}
          onFinish={onFinish}
          labelCol={{
            span: 4,
          }}
        >
          <Form.Item
            label="名称"
            name="title"
            rules={[
              {
                required: true,
                message: '请填写名称',
              },
            ]}
          >
            <Input placeholder="请填写名称" />
          </Form.Item>
          <Form.Item
            label="上级菜单"
            name="parentId"
            rules={[
              {
                required: true,
                message: '请选择上级菜单',
              },
            ]}
          >
            <Cascader
              options={options}
              placeholder="请选择上级菜单"
              changeOnSelect
            />
          </Form.Item>
          <Form.Item label="访问路径" name="name">
            <Input placeholder="请填写访问路径"/>
          </Form.Item>
          <Form.Item label="图标" name="icon">
            <Input placeholder="请选择图标" />
          </Form.Item>
          <Form.Item label="排序号" name="sort">
            <InputNumber min={0} max={100000} defaultValue={0} />
          </Form.Item>
          <Form.Item>
            <Button
              style={{
                float: 'right',
              }}
              type="primary"
              htmlType="submit"
            >
              提交
            </Button>
          </Form.Item>
        </Form>
        <div
          style={{
            backgroundColor: '#e6f4ff',
            border: '1px solid #91caff',
            padding: '10px',
          }}
        >
          参考{' '}
          <a
            href="https://ant-design.antgroup.com/components/icon-cn"
            target={'_blank'}
            rel="noopener noreferrer"
          >
            Ant Design
          </a>{' '}
          图标库，找图标
        </div>
        {/* 表单形式 */}
      </Modal>
    </>
  );
}
